<template>
    <div>
        我是Banner
        <div id="container" ref="container"></div>

        <button @click="addData">给container添加数据 </button>

        <button @click="counter++"> 点我+1 ：counter：{{ counter }}</button>
    </div>
</template>

<script setup lang="ts" name='Banner'>
import { ref, reactive } from "vue";
let container = ref<HTMLElement>();
let counter = ref(0)

let numa = 100;

function addData() {
    //通过document.createEelemt
    let div = document.createElement("div");
    div.innerHTML = "我是Banner通过document.createEelemt添加的";

    //此种情况有问题,不建议使用
    // let container = document.querySelector("#container")

    console.log("container.value", container.value);

    container.value?.appendChild(div)

}


//给外部暴露数据用的
defineExpose({
    counter
})

</script>

<style scoped></style>